<template>
  <div id="components-modal-demo-position">
    <a-button size="large" type="primary" @click="modalVisible = true">
      添加
    </a-button>
    <a-modal
      v-model:visible="modalVisible"
      title="添加新课题"
      centered
      @ok="modalVisible = false"
      :footer="null"
      bodyStyle="width:600px;"
    >
      <a-form :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="课题名称">
          <a-input v-model:value="form.type.subject_name" />
        </a-form-item>
        <a-form-item label="课题类型">
          <a-select
            v-model:value="form.type.subject_type"
            placeholder="请选择对应的课题类型"
          >
            <a-select-option
              v-for="item in subject_typeList"
              :key="item.subject_type.url"
            >
              {{ item.subject_type.subject_type }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="关键词">
          <a-input v-model:value="form.type.subject_keyword" />
        </a-form-item>
        <a-form-item label="责任人">
          <a-select
            v-model:value="form.type.subject_principal"
            placeholder="请选择责任人"
          >
            <a-select-option
              v-for="item in subject_principalSelectionList"
              :key="item.subject_principal.url"
            >
              {{ item.subject_principal.subject_principal }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="参与人">
          <a-select
            v-model:value="form.type.subject_participant"
            placeholder="请选择参与人"
          >
            <a-select-option
              v-for="item in subject_participantSelectionList"
              :key="item.subject_participant.url"
            >
              {{ item.subject_participant.subject_participant }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <!--        <a-form-item label="审核人">-->
        <!--          <a-select v-model:value="form.type.subject_reviewer" placeholder="请选择审核人">-->
        <!--            <a-select-option v-for="item in subject_reviewerSelectionList" :key="item.subject_reviewer.url">-->
        <!--              {{ item.subject_reviewer.subject_reviewer }}-->
        <!--            </a-select-option>-->
        <!--          </a-select>-->
        <!--        </a-form-item>-->
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button type="primary" @click="onSubmit">
            添加
          </a-button>
          <a-button style="margin-left: 10px;" @click="modalVisible = false">
            取消
          </a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
  <div>
    <a-table
      :columns="columns"
      :data-source="data"
      :pagination="{ pageSize: 50 }"
      :scroll="{ x: 240 }"
    />
  </div>
</template>
<script>
//import Axios from "axios";

const columns = [
  {
    title: '课题名称',
    dataIndex: 'subject_name',
    align: 'center',
    slots: { customRender: 'subject_name' },
    ellipsis: true,
  },
  {
    title: '课题类型',
    dataIndex: 'subject_type',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '关键字',
    dataIndex: 'subject_keyword',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '负责人',
    dataIndex: 'subject_principal',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '参与人',
    dataIndex: 'subject_participant',
    align: 'center',
    ellipsis: true,
  },
  // {
  //   title: '审核人',
  //   dataIndex: 'subject_reviewer',
  //   align: 'center',
  //   ellipsis: true,
  // },
]
//Axios.defaults.baseURL = '/api'

export default {
  name: 'MySubject',
  data() {
    return {
      subject_typeList: [],
      subject_principalSelectionList: [],
      subject_participantSelectionList: [],
      // subject_reviewerSelectionList: [],
      data: [],
      loading: false,
      columns,
      modalVisible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        name: '',
        region: undefined,
        date1: undefined,
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
    }
  },
  mounted() {
    this.fetch()
  },
  methods: {
    fetch() {
      this.data = []
      this.loading = true
      this.axios
        .get('/subject_management/subjects')
        .then((res) => {
          let data = res.data
          for (let i = 0; i < data.length; ++i) {
            // let username = null;// eslint-disable-line no-unused-vars
            // this.axios.get(data[i].username)
            //   .then((res) => {
            // console.log('alloy alloy:', res.data)
            //   username = res.data// eslint-disable-line no-unused-vars
            this.data
              .push({
                key: i,
                subject_name: res.data[i].subject_name,
                subject_type: res.data[i].subject_type,
                subject_keyword: res.data[i].subject_keyword,
                subject_principal: res.data[i].subject_principal,
                subject_participant: res.data[i].subject_participant,
                // subject_reviewer: res.data[i].subject_reviewer,
              })
              // })
              .catch((error) => {
                console.log('Error', error.message)
              })
          }
        })
        .catch((error) => {
          console.log('Error', error.message)
        })
      this.axios
        .get('/user_management/users/')
        .then((res) => {
          // console.log(res.data)
          for (let i = 0; i < res.data.length; ++i) {
            this.subject_principalSelectionList.push({
              key: i,
              subject_principal: res.data[i],
            })
          }
        })
        .catch((error) => {
          console.log('Error', error.message)
        })
    },
    onSubmit() {
      this.axios
        .post('/subject_management/subjects', {
          subject_name: this.form.type.subject_name,
          subject_type: this.form.type.subject_type,
          subject_keyword: this.form.type.subject_keyword,
          subject_principal: this.form.type.subject_principal,
          subject_participant: this.form.type.subject_participant,
          // subject_reviewer: this.form.type.subject_reviewer,
        })
        .then(() => {
          this.fetch()
        })
        .catch((error) => {
          console.log('Error', error.message)
        })
      // console.log('submit!', this.form.type)
      this.modalVisible = false
    },
  },
}
</script>

<style>
#components-modal-demo-position {
  text-align: end;
  padding: 10px;
}
</style>
